<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html"><head>
    <meta charset="utf-8">
    <title>{include file="common/title"}</title>

    <meta name="description" content="Dashboard">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!--Basic Styles-->
    <link href="__DATA__/admin/style/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__DATA__/date/dist/bootstrap-clockpicker.min.css">
    <link href="__DATA__/admin/style/font-awesome.css" rel="stylesheet">
    <link href="__DATA__/admin/style/weather-icons.css" rel="stylesheet">

    <!--Beyond styles-->
    <link id="beyond-link" href="__DATA__/admin/style/beyond.css" rel="stylesheet" type="text/css">
    <link href="__DATA__/admin/style/demo.css" rel="stylesheet">
    <link href="__DATA__/admin/style/typicons.css" rel="stylesheet">
    <link href="__DATA__/admin/style/animate.css" rel="stylesheet">

    <link rel="stylesheet" href="__DATA__/layui-v2.2.45/layui/css/layui.css" >
    <!--富文本编辑器-->
    <!-- 配置文件 -->
    <script type="text/javascript" src="__DATA__/static/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__DATA__/static/ueditor/ueditor.all.js"></script>
    <link rel="stylesheet" type="text/css" href="__DATA__/static/ueditor/themes/default/css/ueditor.min.css" />
</head>
<body>
<!-- 头部 -->
{include file="common/top"}
<!-- /头部 -->

<div class="main-container container-fluid">
    <div class="page-container">
        <!-- Page Sidebar -->
        {include file="common/left"}
        <!-- /Page Sidebar -->
        <!-- Page Content -->
        <div class="page-content">
            <!-- Page Breadcrumb -->
            <div class="page-breadcrumbs">
                <ul class="breadcrumb">
                    <li class="active">商家信息管理</li>
                </ul>
            </div>
            <!-- /Page Breadcrumb -->

            <!-- Page Body -->
            <!--正文-->
            <style>
                /*.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {color: #fff;background: #a0053b;}*/
                /*.btn-primary {color: #fcfafa;background-color: #3b3063;border-color: #ffffff;}*/
                /*.list-group .list-group-item.active {background-color: #3b3063;border-color: #f3f0f2;}*/
                /*.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: #FFF;background-color: #c83716;border-color: #c83716;}*/
                /*.nav.nav-tabs {margin-bottom: 10px;border-color: #c83716;}*/
                /*.btn-default {color: #f4eeee;background-color: #169786;border-color: #f2f7f7;}*/
                /*.panel-info > .panel-heading {color: #fbfdfe;background-color: #179786;border-color: #49a2b4;}*/
                /*.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {z-index: 2;color: #fff;cursor: default;background-color: #3b3063;border-color: #3b3063;}*/
                /*.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {background: #3b3063;border: 1px solid #3b3063;color: #fff;}*/
                /*.daterangepicker td.active, .daterangepicker td.active:hover {background-color: #d9534f;border-color: #ffffff;color: #fff;}*/
                /*.input-group-addon {padding: 6px 12px;font-size: 14px;font-weight: 400;line-height: 1;color: #555;text-align: center;background-color: #e2a385;border: 1px solid #ccc;border-radius: 4px;}*/
                /*.form-control-excel {height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}*/
                /*.ibox {clear: both;margin-bottom: 25px;margin-top: 0;padding: 0;}*/
                /*.ibox-title {-moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background-color: #ffffff;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;border-image: none;border-width: 4px 0px 0;color: inherit;margin-bottom: 0;padding: 14px 15px 7px;min-height: 48px;}*/
                /*.ibox-content {clear: both;background-color: #ffffff;color: inherit;padding: 15px 20px 20px 20px;border-color: #e7eaec;-webkit-border-image: none;-o-border-image: none;border-image: none;border-style: solid solid none;border-width: 1px 0px;}	*/
                /*.text-info {color: #23c6c8;}*/
                /*.font-bold {font-weight: 600;}*/
                /*.stat-percent {float: right;}*/
                /* 门店图片 */
                .panel-slide{position: relative;}
                .panel-slide .btnClose{position: absolute; top:-10px; right:-10px; width:30px; height: 30px; border-radius: 30px;background: #eee; font-size: 16px; cursor: pointer; color:#FFF; text-align: center; line-height: 30px}
                .panel-slide .btnClose:hover{background: red}
                .panel-slide .panel-body div{margin-top: 10px}
            </style>
            <style type="text/css">
                .nav-tabs>li>a:hover{
                    color: #333;
                    border-color: #31C2A5;
                    background-color: white;
                }
                .nav-tabs > li.active > a,.nav-tabs > li.active > a:hover{
                    background-color: #31C2A5;
                    color: white;
                    border-color: #31C2A5;
                }
                .nav.nav-tabs{border-color: #31C2A5;margin-top: 30px;}
            </style>
            <ul class="nav nav-tabs">
                <li class="active"><a href="javascript:void(0);">门店信息</a></li>
               <li>&nbsp</li>
                <li class="active"><a href="{:url('business/info/gzhupdate')}">修改公众号二维码</a></li>
            </ul>
            <div class="main" style="background: white">
                <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
                    <!--<input type="hidden" name="parentid" value="" />-->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            系统信息&nbsp;&nbsp;>&nbsp;&nbsp;门店信息
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">店铺logo</label>
                            <div class="col-sm-9 col-xs-12">
                                <div class="input-group ">
                                    <input type="text" name="business_logo" value="" class="form-control" autocomplete="off" accept="image/*" readonly>
                                    <span class="input-group-btn">
				                  <button class="btn btn-default" type="button" onClick="logoInput.click();">选择图片</button>
				                  </span>
                                </div>
                                <input type="file" name="business_logo" style="display: none;" id="logoInput" onchange="imgLoading(this)"/>
                                <img src="__DATA__/uploads/shop/{$data.business_logo}" style="width: 100px;height: 100px;" >
                                <span class="input-group-btn"></span>
                            </div>
                        </div>
                        <script>
                            function imgLoading(a){
                                //input value 的变化
                                a.parentNode.children[0].children[0].value = a.value;
                                //img src 的变化
                                a.parentNode.children[2].src = window.URL.createObjectURL(a.files[0]);
                            }
                        </script>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">商家名称</label>
                            <div class="col-sm-9">
                                <input type="text" name="business_name"  class="form-control" value="{$data.business_name}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">商家电话</label>
                            <div class="col-sm-9">
                                <input type="text" name="business_tel" class="form-control" value="{$data.business_tel}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">商家地址</label>
                            <div class="col-sm-9">
                                <input type="text" name="business_address" class="form-control" value="{$data.business_address}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">地址坐标</label>
                            <div class="col-sm-10">
                                <div class="row row-fix">
                                    <div class="col-xs-4 col-sm-4">
                                        <input type="text" name="business_lng" id="business_lng" value="{$data.business_lng}" placeholder="地理经度"  class="form-control" />
                                    </div>
                                    <div class="col-xs-4 col-sm-4">
                                        <input type="text" name="business_lat" id="business_lat" value="{$data.business_lat}" placeholder="地理纬度"  class="form-control" />
                                    </div>
                                    <div class="col-xs-4 col-sm-4">
                                        <!--data-toggle="modal" data-target=".bs-example-modal-lg"-->
                                        <!--<button type="button" data-toggle="modal" data-target=".bs-example-modal-lg"  class="btn btn-primary" >选择坐标</button>-->
                                        <!--<button onclick="showCoordinate(this);" class="btn btn-default" type="button">选择坐标</button>-->
                                    </div>
                                    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ox3rlNd0GLgzx8cCesUtxSQW7NcS7GnI "></script>
                                    <div style="width:520px;height:340px;border:1px solid gray;margin-left: 20px" id="container"></div>
                                    <script type="text/javascript">

//                                         var map = new BMap.Map("container");          // 创建地图实例
//
//                                         var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
//
//                                         map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
                                        var map = new BMap.Map("container");
                                        {if ($data.business_lng)}var point = new BMap.Point({$data.business_lng}, {$data.business_lat});map.centerAndZoom(point, 15); {else}map.centerAndZoom("杭州",12);{/if}
                                        //单击获取点击的经纬度
                                        map.addEventListener("click",function(e){
                                            var lng=e.point.lng;
                                            var lat=e.point.lat;
                                            $('#business_lng').val(lng);
                                            $('#business_lat').val(lat);
                                        });
                                        </script>
                                </div>
                            <!--地图-->
                        </div>
                    </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">商家环境</label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" readonly="readonly" value="" placeholder="批量上传图片" autocomplete="off">
                                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        预览图：
                                        {volist name="environment" id="v"}
                                        <img src="__DATA__/uploads/shop/{$v['environment_img']}" onclick="deleteEnvironment({$v.id})" alt="" style="margin-left: 10px; width: 100px;height: 100px;">
                                        {/volist}
                                        <div class="layui-upload-list" id="demo2"></div>
                                    </blockquote>
                                </span>
                            </div>
                        </div>
                        <script>
                            function deleteEnvironment($id){
                                layer.confirm('是否删除此环境图片', {
                                    btn: ['确认','删除'] //按钮
                                }, function(){
                                    $.ajax({
                                            type:"post",
                                            url: "{:url('business/info/deleteEnvironment')}",
                                            data: {"data":$id},
                                            success:function(data){
                                                if(data){
                                                    history.go();
                                                }else{
                                                    layer.msg('修改失败', {icon: 5});
                                                }
                                            }
                                        }
                                    )
                                }, function(){

                                });
                            }
                        </script>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">公告</label>
                            <div class="col-sm-9">
                                <input type="text" name="business_announcement" class="form-control" value="{$data.business_announcement}" />
                            </div>
                        </div>

                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 col-md-2 control-label">设置推送模板消息商家微信号</label>
                                <div class="col-sm-9">
                                    <a class="btn btn-info btn-sm tabel_btn" target="_blank" href="http://pan.baidu.com/share/qrcode?w=250&h=250&url=https://app.yizhizaibo.cn/eat/business/code/chanceId/id/{$data.business_id}">
                                        设置推送模板消息商家微信号
                                    </a>
                                </div>
                            </div>


                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">上午营业时间(开始时间)</label>
                            <div class="col-sm-10">
                                <script type="text/javascript">
                                    require(["clockpicker"], function($){
                                        $(function(){
                                            $(".clockpicker").clockpicker({
                                                autoclose: true
                                            });
                                        });
                                    });
                                </script>
                                <div class="input-group clockpicker">
                                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                    <input type="text" name="business_action_time" readonly value="{$data.business_action_time}" class="form-control">
                                </div>                    </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">下午营业时间(结束时间)</label>
                            <div class="col-sm-10">
                                <div class="input-group clockpicker">
                                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                    <input type="text" name="business_last_time" readonly value="{$data.business_last_time}" class="form-control">
                                </div>                    </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label" style="margin-right: 15px;">是否休息</label>
                            <select class="col-sm-8" name="business_rest">
                                {if condition="$data['business_rest'] eq 1 "}
                                <option value="1">是</option>
                                <option value="0">否</option>
                                {else /}
                                <option value="0">否</option>
                                <option value="1">是</option>
                                {/if}
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label" style="margin-right: 15px;">属于哪个商圈</label>
                            <select class="col-sm-8" name="business_circle">
                                <option value="{$data.business_circleId}">{$data.business_circle}</option>
                                {volist name="select" id="v"}
                                <option value="{$v.id}">{$v.circle_name}</option>
                                {/volist}
                            </select>
                        </div>
                        <!-- <div class="form-group" style="width: 100%;">

                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">优惠条件设置</label>
                        <label for="inputEmail3" class="col-sm-1 control-label">满</label>
                        <div class="col-sm-2">

                            <input type="number" name="conditions" value="" class="form-control" id="inputEmail3"
                                   placeholder="请填写金额">

                        </div>
                        <label for="inputEmail3" class="col-sm-1 control-label">减</label>

                        <div class="col-sm-2">

                            <input type="number" name="preferential" value="" class="form-control" id="inputEmail3"
                                   placeholder="请填写金额">

                        </div>
                        <label for="inputEmail3" class="col-sm-3" style="margin-top: 7px;color: #999;">(请设置满减优惠,例如满50减10)</label>
                        </div> -->
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">起送价</label>
                            <div class="col-sm-10">
                                <input type="number" name="business_start_price" value="{$data.business_start_price}"  class="form-control" id="inputEmail3"
                                       placeholder="请填写起送价格,单位元">
                            </div>
                        </div>

                        <div class="form-group">

                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">配送费</label>

                            <div class="col-sm-10">

                                <input type="number" name="business_service_price" value="{$data.business_service_price}" class="form-control" id="inputEmail3"
                                       placeholder="请填写配送费,单位元">

                            </div>
                        </div>

                        <div class="form-group">

                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">出餐时间</label>
                            <div class="col-sm-10">
                                <input type="text" name="business_service_time" value="{$data.business_service_time}" class="form-control" id="inputEmail3"
                                       placeholder="请填写配送时间">
                                *例如 : 30分钟
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                            <!--<label for="inputEmail3" class="col-sm-2 control-label">配送方式</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<select class="form-control" name="ps_mode">-->
                                    <!--<option value="1">达达配送</option>-->
                                    <!--<option value="2" selected="selected">商家配送</option>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="form-group">

                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">配送距离设置</label>

                            <div class="col-sm-10">

                                <input type="number" name="business_distance" value="{$data.business_distance}" class="form-control" id="inputEmail3"
                                       placeholder="请填写配送的最大距离,单位千米">
                                单位为:公里(千米)
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">是否开启新用户优惠</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="business_new_member">
                                    {if condition="$data['business_new_member'] eq 1 "}
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                    {else /}
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                    {/if}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">新用户立减金额</label>
                            <div class="col-sm-10">
                                <input type="number" name="business_member_price" value="{$data.business_member_price}" class="form-control" id="inputEmail3"
                                       placeholder="请填写立减金额,单位元">

                            </div>
                        </div>
                        <!--
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">店铺音乐</label>
                            <div class="col-sm-10">

        <script type="text/javascript">
            function showVideoDialog(elm, options) {
                require(["util"], function(util){
                    var btn = $(elm);
                    var ipt = btn.parent().prev();
                    var val = ipt.val();
                    util.audio(val, function(url){
                        if(url && url.attachment && url.url){
                            btn.prev().show();
                            ipt.val(url.attachment);
                            ipt.attr("filename",url.filename);
                            ipt.attr("url",url.url);
                        }
                        if(url && url.media_id){
                            ipt.val(url.media_id);
                        }
                    }, {"direct":true,"multi":false,"type":"video","fileSizeLimit":5120000});
                });
            }

        </script>
        <script type="text/javascript">
            function showVideoDialog(elm, options) {
                require(["util"], function(util){
                    var btn = $(elm);
                    var ipt = btn.parent().prev();
                    var val = ipt.val();
                    util.audio(val, function(url){
                        if(url && url.attachment && url.url){
                            btn.prev().show();
                            ipt.val(url.attachment);
                            ipt.attr("filename",url.filename);
                            ipt.attr("url",url.url);
                        }
                        if(url && url.media_id){
                            ipt.val(url.media_id);
                        }
                    }, {"direct":true,"multi":false,"type":"video","fileSizeLimit":5120000});
                });
            }

        </script>
            <div class="input-group">
                <input type="text" value="" name="mp3" class="form-control" autocomplete="off" >
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="showVideoDialog(this,{'direct':true,'multi':false,'type':'video','fileSizeLimit':5120000});">选择媒体文件</button>
                </span>
            </div>                    </div>
                        </div> -->
                        <!--<div class="form-group">-->
                            <!--<label class="col-xs-12 col-sm-3 col-md-2 control-label">分享海报背景图片</label>-->
                            <!--<div class="col-sm-9">-->

                                <!--<div class="input-group ">-->
                                    <!--<input type="text" name="hb_img" value="images/16/2017/11/cAx9WErfrXjtA3j55LUbLZatk9EtAb.jpg" class="form-control" autocomplete="off">-->
                                    <!--<span class="input-group-btn">-->
				<!--<button class="btn btn-default" type="button" onclick="showImageDialog(this);">选择图片</button>-->
			<!--</span>-->
                                <!--</div>-->
                                <!--<div class="input-group " style="margin-top:.5em;">-->
                                    <!--<img src="http://zhycms.com/attachment/images/16/2017/11/cAx9WErfrXjtA3j55LUbLZatk9EtAb.jpg" onerror="this.src='./resource/images/nopic.jpg'; this.title='图片未找到.'" class="img-responsive img-thumbnail"  width="150" />-->
                                    <!--<em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage(this)">×</em>-->
                                <!--</div>                        *不填为默认图片 尺寸大小1080*1517-->
                            <!--</div>-->
                        <!--</div>-->
                            <!--<div class="form-group">-->
                                <!--<label class="col-xs-12 col-sm-3 col-md-2 control-label" style="margin-right: 15px;">是否开启餐桌状态判断</label>-->
                                <!--<select class="col-sm-8" name="is_rest">-->
                                    <!--<option value="1">是</option>-->
                                    <!--<option value="2" selected="selected">否</option>-->
                                <!--</select>-->
                            <!--</div>-->
                            <!--<div class="form-group">-->
                                <!--<label class="col-xs-12 col-sm-3 col-md-2 control-label" style="margin-right: 15px;">是否开启餐后支付</label>-->
                                <!--<select class="col-sm-8" name="is_rest">-->
                                    <!--<option value="1">是</option>-->
                                    <!--<option value="2" selected="selected">否</option>-->
                                <!--</select>-->
                            <!--</div>-->

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">商家简介</label>
                            <div class="col-sm-10">
                                <textarea id="newsEditor" name="business_description" style="height: 80%;width: 500px;">{$data.business_description}</textarea>
                                <script type="text/javascript">
                                    UE.getEditor('newsEditor');
                                    // var content = UE.getPlainTxt();//content就是编辑器的带格式的内容
                                </script>         </div>
                        </div>
                    </div>
            </div>
            <div class="form-group col-sm-12">
                <input type="submit"  value="提交" class="btn col-lg-3" style="color: white;background-color: #31C2A5;"/>
            </div>
            </form>
        </div>
        <!-- /Page Body -->
    </div>
    <!-- /Page Content -->
</div>
</div>
<!--Basic Scripts-->
<script src="__DATA__/admin/style/jquery_002.js"></script>
<script src="__DATA__/admin/style/bootstrap.js"></script>
<script src="__DATA__/admin/style/jquery.js"></script>
<!--Beyond Scripts-->
<script src="__DATA__/admin/style/beyond.js"></script>
<!--上传-->
<script src="__DATA__/layui-v2.2.45/layui/layui.js"></script>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#test2'
            ,url: '{:url('business/info/upload')}'
            ,multiple: true,accept: 'file'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img style="width: 100px;height: 100px;margin-left: 20px"  src="'+ result +'" alt="'+ file.name +'" >')
                });

            }
            ,done: function(res){
                history.go();
            }
        });
    });
</script>
<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="__DATA__/date/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="__DATA__/date/assets/js/bootstrap.min.js"></script>

<!-- ClockPicker script -->
<script type="text/javascript" src="__DATA__/date/dist/bootstrap-clockpicker.min.js"></script>

<script type="text/javascript">
    $('.clockpicker').clockpicker()
        .find('input').change(function(){
        // TODO: time changed
        console.log(this.value);
    });
    $('#demo-input').clockpicker({
        autoclose: true
    });
    $('#demo-input2').clockpicker({
        autoclose: true
    });

    if (something) {
        // Manual operations (after clockpicker is initialized).
        $('#demo-input').clockpicker('show') // Or hide, remove ...
            .clockpicker('toggleView', 'minutes');
    }
</script>

</body></html>